<template>
  <el-aside width="200px">
    <el-menu
      router
      class="el-menu-vertical-demo"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
      :unique-opened="true"
    >
      <el-submenu :index="item.id + ''" v-for="item in menus" :key="item.id">
        <template slot="title">
          <span>{{ item.authName }}</span>
        </template>
        <el-menu-item-group>
          <el-menu-item
            v-for="ite in item.children"
            :key="ite.id"
            :index="ite.path"
          >
            <i class="el-icon-location"></i>
            <span>{{ ite.authName }}</span>
          </el-menu-item>
        </el-menu-item-group>
      </el-submenu>
    </el-menu>
  </el-aside>
</template>

<script>
import { getMenus } from "../api/api";
export default {
  data() {
    return {
      menus: [],
    };
  },
  
  created() {
    this.MenusList();
  },
  methods: {
    async MenusList() {
      let res = await getMenus();
      console.log(res, 11);
      this.menus = res.data;
    },
  },
};
</script>

<style lang="scss" scoped>
</style>